<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <style>
        *{margin: 0;padding: 0;}
        main{
            width: 800px;
            min-height: 760px;
            margin: 0 auto;
            padding: 50px;
            box-sizing: border-box;
            background-color: #f4f4f4;
        }
        main p{
            text-align: right;
            padding-bottom: 15px;
            border-bottom: 1px solid #999;
            /* background-color: aqua; */
        }
        main ul li{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            list-style: none;
            margin-top: 20px;
        }
        main ul li h4{
            margin-left: 20px;
        }
        main ul li img{
            width: 50px;
        }

    </style>
</head>
<body>
    <main>
        <p>关键词：<span>未知</span></p>
        <ul>
        </ul>
    </main>
    <script src="./3.js"></script>
    <script>
        let artists = localStorage.getItem('singerName');
        let obj = {
            keywords:artists
        };
        console.log(obj);
        // 请求接口
        http.get('https://autumnfish.cn/search',obj,function(res){
            console.log(res);
            if(res.msg == '参数错误'){
                alert('请输入正确的歌手名称')
            }else{
                // 将本地存储的参数名称放入对应的标签中
                document.querySelector('p span').textContent = artists;
                // 获取需要的数据
                let songsArr = res.result.songs;    // 这是数组

                // 拼接标签
                let lis = '';
                songsArr.forEach(function(item){
                    // console.log(item.artists[0].img1v1Url);
                    lis += `
                        <li>
                            <img src=${item.artists[0].img1v1Url} alt="">
                            <h4>${item.name}</h4>
                        </li>
                    `
                })
                document.querySelector('ul').innerHTML = lis
            }
        })
    </script>
</body>
</html>